<div class="page-list-container">
  <ul class="nav nav-tabs customtab">
      <li class="active"><a href="#view-list" data-toggle="tab">{{ t('List View') }}</a></li>
      {% if getConfig('crowi', 'customize:isEnabledTimeline') %}
      <li><a href="#view-timeline" data-toggle="tab">{{ t('Timeline View') }}</a></li>
      {% endif %}
  </ul>

  <div class="tab-content">
    {# list view #}
    <div class="p-t-10 active tab-pane fade page-list-container in" id="view-list">
      {% if pages.length == 0 %}
        <div class="m-t-10">
          {% if isTrashPage() %}
          No deleted pages.
          {% else %}
          There are no pages under <strong>{{ path }}</strong>.
          {% endif %}
        </div>
      {% else %}
        {% include 'page_list.html' with { pages: pages, pager: pager, viewConfig: viewConfig } %}
      {% endif %}
    </div>

    {# timeline view #}
    {% if getConfig('crowi', 'customize:isEnabledTimeline') %}
      <div class="tab-pane m-t-30" id="view-timeline">
        <script type="text/template" id="page-timeline-data">{{ JSON.stringify(pagesDataForTimeline(pages)) }}</script>
        {# render React Component PageTimeline #}
        <div id="page-timeline"></div>
      </div>
    {% endif %}
  </div>
</div>
